import { BasicColumn, BasicTable, FormSchema, useTable } from "@/components/Table";
import { Button, Tag } from "antd";
import HandlingProcess from "../../task/todo/components/handlingProcess";
import { useDrawer } from "@/components/Drawer";
import { processInstanceApi } from "@/api/bpm/task/processInstance";
import { formatDate } from "@/utils/util";
import CancelProcess from "./cancelProcess";
import { useTranslation } from "react-i18next";

const index = () => {
	const { t } = useTranslation();
	const todo_en_vi = "task.todo";
	const manager_en_vi = "task.processInstanceManager";
	const formatTime = (timestamp: any) => {
		if (!timestamp) return `0 ${t(`${todo_en_vi}.second`)}`;
		const seconds = parseInt((timestamp / 1000) % 60);
		const minutes = parseInt((timestamp / 60000) % 60);
		const hours = parseInt((timestamp / 3600000) % 60);
		if (hours) return `${hours}${t(`${todo_en_vi}.hour`)}${minutes}${t(`${todo_en_vi}.minute`)}`;
		if (minutes) return `${minutes}${t(`${todo_en_vi}.minute`)}`;
		if (seconds) return `${seconds}${t(`${todo_en_vi}.second`)}`;
	};
	const schemas: FormSchema[] = [
		{
			label: t(`${manager_en_vi}.initiator`),
			field: "startUserId",
			component: "Select"
		},
		{
			label: t(`${manager_en_vi}.processName`),
			field: "name",
			component: "Input"
		},
		{
			label: t(`${manager_en_vi}.belongingProcess`),
			field: "processDefinitionId",
			component: "Input"
		},
		{
			label: t(`${manager_en_vi}.processCategory`),
			field: "category",
			component: "Select"
		},
		{
			label: t(`${manager_en_vi}.processStatus`),
			field: "status",
			component: "Select"
		},
		{
			label: t(`${manager_en_vi}.initiationTime`),
			field: "createTime",
			component: "RangePicker"
		}
	];
	const columns: BasicColumn[] = [
		{
			title: t(`${manager_en_vi}.processName`),
			dataIndex: "name"
		},
		{
			title: t(`${manager_en_vi}.processCategory`),
			dataIndex: "cateName"
		},
		{
			title: t(`${manager_en_vi}.initiator`),
			dataIndex: "startUser",
			render: (startUser: any) => {
				return startUser.nickname;
			}
		},
		{
			title: t(`${manager_en_vi}.initiatingDepartment`),
			dataIndex: "startUser",
			render: (startUser: any) => {
				return startUser.deptName;
			}
		},
		{
			title: t(`${manager_en_vi}.processStatus`),
			dataIndex: "status",
			render: (status: any) => {
				if (status == 2) return <Tag color="success"> {t(`${manager_en_vi}.approved`)}</Tag>;
				if (status == 4) return <Tag color="warning"> {t(`${manager_en_vi}.cancelled`)}</Tag>;
				return <Tag color="processing">{t(`${manager_en_vi}.inReview`)}</Tag>;
			}
		},
		{
			title: t(`${manager_en_vi}.initiationTime`),
			dataIndex: "startTime",
			render: (time: any) => {
				return formatDate(new Date(time));
			}
		},
		{
			title: t(`${manager_en_vi}.endTime`),
			dataIndex: "endTime",
			render: (time: any) => {
				if (!time) return "";
				return formatDate(new Date(time));
			}
		},
		{
			title: t(`${manager_en_vi}.duration`),
			dataIndex: "durationInMillis",
			render: (time: any) => {
				return formatTime(time);
			}
		},
		{
			title: t(`${manager_en_vi}.currentApprovalTask`),
			dataIndex: "reason",
			render: () => {
				return (
					<div>
						<Button type="link">{t(`${manager_en_vi}.leaderApproval`)}</Button>
					</div>
				);
			}
		},
		{
			title: t(`${manager_en_vi}.processNumber`),
			dataIndex: "id"
		},
		{
			title: t(`${manager_en_vi}.operation`),
			fixed: "right",
			width: 200,
			render: (_, record) => {
				return (
					<div>
						<Button type="link" onClick={handle(record)}>
							{t(`${manager_en_vi}.details`)}
						</Button>
						<Button type="link" onClick={reissue(record)}>
							{t(`${manager_en_vi}.cancel`)}
						</Button>
					</div>
				);
			}
		}
	];
	const [register, { reload }] = useTable({
		api: processInstanceApi.processInstanceManagerPage,
		columns,
		useSearchForm: true,
		formConfig: {
			labelWidth: 150,
			schemas,
			showActionButtonGroup: true,
			baseColProps: { span: 7 },
			actionColOptions: { span: 24 }
		},
		bordered: true
	});
	const [registerDrawer, { openDrawer }] = useDrawer();
	const handle = (record: any) => () => {
		openDrawer(true, {
			record,
			reload
		});
	};
	const [registerDrawerCancelProcess, { openDrawer: openDrawerCancelProcess }] = useDrawer();
	const reissue = (record: any) => () => {
		openDrawerCancelProcess(true, {
			record
		});
		return;
	};
	return (
		<div>
			<div className=" page-content">
				<BasicTable register={register}></BasicTable>
			</div>
			<HandlingProcess register={registerDrawer}></HandlingProcess>
			<CancelProcess register={registerDrawerCancelProcess}></CancelProcess>
		</div>
	);
};
export default index;
